<template>
    <div class="box">
        <p class="title">{{ isRoomHost ? '主持会议' : '加入会议' }}</p>
        <div class="info">

            <n-space vertical>
                <n-input v-model:value="meetingInfo.meettingUserName" type="text" placeholder="姓名" />
                <n-input v-if="!isRoomHost" v-model:value="meetingInfo.roomId" type="text" placeholder="会议ID" />
            </n-space>
            <div class="audio-switch">

                <n-switch v-model:value="meetingInfo.onlyAudio" size="medium">
                    <template #icon>
                        <svg t="1649690571328" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4305" width="128" height="128">
                            <path d="M552.96 348.16m-61.44 0a61.44 61.44 0 1 0 122.88 0 61.44 61.44 0 1 0-122.88 0Z"
                                fill="#18a058" p-id="4306" data-spm-anchor-id="a313x.7781069.0.i0" class="selected">
                            </path>
                            <path
                                d="M512 614.4a155.648 155.648 0 0 1-153.6-157.5424v-94.5152a153.6 153.6 0 1 1 307.2 0v94.52544A155.648 155.648 0 0 1 512 614.4z m92.16-252.0576a92.16 92.16 0 1 0-184.32 0v94.52544a92.16 92.16 0 1 0 184.32 0v-94.52544z"
                                fill="#333333" p-id="4307"></path>
                            <path
                                d="M542.72 704.32768V747.52h81.92a30.72 30.72 0 0 1 0 61.44H399.36a30.72 30.72 0 0 1 0-61.44h81.92v-43.19232A235.39712 235.39712 0 0 1 276.48 471.04a30.72 30.72 0 0 1 61.44 0 174.08 174.08 0 0 0 348.16 0 30.72 30.72 0 0 1 61.44 0 235.39712 235.39712 0 0 1-204.8 233.28768z"
                                fill="#333333" p-id="4308"></path>
                        </svg>
                    </template>
                </n-switch>
                <b>仅开启音频</b>
            </div>
            <n-space justify="end">
                <n-button strong type="success" @click="enterRoom">
                    确 定
                </n-button>
                <n-button strong @click="returnIdentityChoice">
                    取 消
                </n-button>
            </n-space>

        </div>
    </div>
</template>

<script setup>
import { computed, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { RoomExistAPI } from '@/http/api/meeting'
const store = useStore()
const router = useRouter()

const meetingInfo = reactive({
    meettingUserName: '',
    roomId: '',
    onlyAudio: false
})
// 获取vuex中的isRoomHost数据
const isRoomHost = computed(() => {
    return store.state.meeting.isRoomHost
})

// 监听switch滑块，将结果保存到vuex
watch(() => meetingInfo.onlyAudio, (newVal) => {
    store.commit('meeting/SET_ISONLYAUDIO', newVal)
})

// 面板取消按钮回调事件，返回上一级面板
function returnIdentityChoice() {
    router.back()
}

// 页面确定按钮回调事件
function enterRoom() {
    store.commit('meeting/SET_MEETING_USERNAME', meetingInfo.meettingUserName)
    isRoomHost.value ? createRoom() : joinRoom()
}

// 参与者，加入房间事件
function joinRoom() {
    // 查询房间号是否存在
    RoomExistAPI({
        roomId: meetingInfo.roomId
    }).then(res => {
        if(res.result.roomExist && !res.result.connectedFull){
            store.commit('meeting/SET_ROOMID', meetingInfo.roomId)
            // todo:导航到视频主页面
            router.push('/meeting/room')
        } else {
            // 提示消息
            console.log("TODO需要写提示消息");
        }
    })
}

// 主持人，创建房间事件
function createRoom() {
    // todo:导航到视频主页面
    router.push('/meeting/room')
}
</script>
<style lang="scss" scoped>
.box {
    width: 600px;
    height: 400px;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10%;
    }

    .info {
        height: 85%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        b {
            padding-left: 20px;
            font-weight: bolder;
        }
    }
}
</style>